<template>

	<div>

		<swiper :options="swiperOption" ref="mySwiper">
			<swiper-slide v-for='item in swiperList' :key='item.id'>
				<img class="swiper-img" :src="item.imgUrl"/>
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>

	</div>

</template>

<script>
	export default {
		props:['swiperList'],
		data() {
			return {
				swiperOption: {
					pagination: {
						el: '.swiper-pagination'
					},
					loop: true
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="stylus">
	
	
	
	.swiper{
		height: 0;
		overflow: hidden;
		padding-bottom: 26.67%;
		background: #ccc;
	}
	.swiper-img{
		width: 100%;
		height: 100%;
	}
	.swiper-pagination-bullets >>> .swiper-pagination-bullet-active{
		background: #fff;
	}

</style>